<template>
  <div>
    <!-- 搜索框 -->
    <search-bar @onSearch="onSearch" />
    <!-- 搜索框 -->
    <!-- 新增菜品 -->
    <el-button type="success" @click="addFoodModel">新增分类</el-button>
    <!-- /新增菜品 -->

    <el-table :data="cates" stripe="false" style="width: 100% ; margin-top :20px;" row-key="id"
      lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
      <el-table-column prop="cateName" label="分类名称" width="200" />
      <!-- <el-table-column prop="intro" label="食品介绍" /> -->
      <!-- <el-table-column prop="num" label="评分" class="cell" /> -->
      <!-- <el-table-column prop="icon" label="图片">
        <template #default="{ row }">
          <div>
            <img :src="row.icon" width="50" alt="">
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="enable" label="是否启用">
        <template #default="{ row }">
          <el-switch v-model="row.enable" />
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="操作">
        <template #default="{ row }">
          <div>
           <!-- 修改菜品 -->
            <el-button type="primary" icon="Edit" @click="updateFoodModel(row.id)"></el-button>
          <!-- 删除菜品 -->
            <el-button type="danger" icon="Delete" @click="delFoodModel(row.id)"></el-button>
            <!--  <el-switch v-model="row.enable"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加菜品弹窗 -->
    <el-dialog v-model="addFoodShow" title="添加菜品" width="40%" >
      <!-- 添加菜品组件 -->
      <cate-add :cates="cates" />
    </el-dialog>
    <!-- 修改菜品弹窗 -->
    <el-dialog v-model="updateFoodShow" title="修改菜品" width="40%" >
      <!-- 添加菜品组件 -->
      <cate-update :cates="cates" :id="cateId" />
    </el-dialog>

  </div>
</template>

<script>
import { fetchCates, deleteFood } from '@/api/CateLists'
import SearchBar from '@/components/SearchBar.vue'
import CateAdd from './components/CateAdd.vue'
import CateUpdate from './components/CateUpdate.vue'

export default {
  name: 'CateLists',
  data () {
    return {
      cateId: -1,
      cates: [],
      searchBar: {
        key: '',
        start: '',
        end: ''
      },
      addFoodShow: false,
      updateFoodShow: false
    }
  },
  methods: {
    deleteFoodModel (id) {
      this.$confirm('确定彻底删除此菜品吗？', '删除').then(() => {
        deleteFood(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.fetchCates()
          }
        })
      })
    },
    addFoodModel () {
      this.addFoodShow = true
    },
    updateFoodModel (id) {
      this.updateFoodShow = true
      this.cateId = id
    },
    onSearch (searchBar) {
      this.searchBar = searchBar
      this.fetchCates()
    },
    fetchCates () {
      fetchCates({
        ...this.searchBar
      }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
        }
      })
    }
  },
  created () {
    this.fetchCates()
  },
  components: {
    SearchBar,
    CateAdd,
    CateUpdate
  }

}
</script>

<style lang="scss" scoped>
:deep .cell {
  text-align: center;
}
</style>
